<!-- 老师详情 -->
<template>
  <div class="container">
    <Nav></Nav>
    <div class="notice_content">
      <div class="details">
        <div class="deL">
          <img src="https://common-image-1258943427.cos.ap-beijing.myqcloud.com/ansjy_pc/img/detailL.png" alt="">
        </div>
        <div class="deR">
          <img src="https://common-image-1258943427.cos.ap-beijing.myqcloud.com/ansjy_pc/img/detailR.png" alt="">
        </div>
        <div class="detail">
          <div class="detailLs">
            <div class="detailL">
              <img :src="list.bodyimgurl" :alt="'岸上教育' + '-' +list.employ_name">
            </div>
            <div class="detail_qua"></div>
          </div>
          <div class="detailR">
            <div class="detail_title">{{list.employ_name}}</div>
            <div class="detail_info">
              <li>
                <label for="">职称</label>
                <span>{{list.position}}</span>
              </li>
              <li>
                <label for="">主讲内容</label>
                <span>{{list.teach_content}}</span>
              </li>
              <li>
                <label for="">代表性课程</label>
                <span>{{list.important_course}}</span>
              </li>
            </div>
            <div class="detail_tea">
              <li>教学特色</li>
              <li>{{list.teach_features}}</li>
            </div>
            <div class="detail_into">
              <li>
                <label for="">学生寄语</label>
                <span>{{list.student_say}}</span>
              </li>
              <li>
                <label for="">学员印象</label>
                <span>{{list.student_word}}</span>
              </li>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
import Nav from '../../components/Nav/nav'
import Bottom from '../../components/Bottom/bottom'
export default {
  async asyncData ({app, params}) {
    let [data] = await Promise.all([
      app.$http.post('/teacher/getTeacherDetail', {
        id: params.id
      })
    ])
    return {
      list: data.data.data
    }
  },
  head () {
    return {
      title: this.list.employ_name,
      meta:[{
        hid: 'description',
        name: 'description',
        content: this.list.desc
      },{
        hid: 'Keywords',
        name: 'Keywords',
        content: this.list.keywords
      }]
    }
  },
  name: 'detail',
  data () {
    return {
      list: []
    }
  },

  created () {
    // console.log(id)
  },

  mounted () {
    this.navType = this.$route.name
    localStorage.setItem('type', this.navType)
    var id = this.$route.params.id
    this.getdetail(id)
  },
  components: {
    Nav,
    Bottom
  },

  computed: {},

  methods: {
    getdetail (id) {
      this.$http.post('/teacher/getTeacherDetail', {
        id: id
      }).then((res) => {
        this.list = res.data.data
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.notice_content{
  display: flex;
  flex-direction: row;
  align-items:flex-start;
  justify-content: space-between;
}
.details{
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
.deL{
  position: absolute;
  z-index: -1;
  left:0px;
  top: 197px;
}
.deR{
  position: absolute;
  z-index: -1;
  right: 0px;
  bottom:218px;
}
.detail{
  width: 1200px;
  height: auto;
  margin: 100px auto;
  display: flex;
  flex-direction: row;
}
.detailLs{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 0px 40px 0px;
}
.detail_qua{
  width:21px;
  height:21px;
  background:rgba(24,144,255,1);
}
.detailL{
  width: 317px;
  height: 325px;
  background: url('https://common-image-1258943427.cos.ap-beijing.myqcloud.com/ansjy_pc/img/detaila.png') no-repeat;
  background-size: 317px 325px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.detailR{
  width: 882px;
  box-sizing: border-box;
  padding: 20px 70px;
}
.detail_title{
  font-size:34px;
  font-family:MicrosoftYaHei;
  font-weight:bold;
  color:rgba(34,34,34,1);
  line-height:45px;
}
.detail_info{
  display: flex;
  flex-direction: column;
  margin-top: 59px;
}
.detail_info li{
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.detail_info li label{
  width:137px;
  height:21px;
  font-size:16px;
  font-family:MicrosoftYaHei;
  font-weight:bold;
  color:rgba(34,34,34,1);
  line-height:21px;
  letter-spacing:3px;
}
.detail_info li span{
  display: block;
  width: 590px;
  font-size:16px;
  font-family:MicrosoftYaHei;
  color:rgba(34,34,34,1);
  line-height:26px;
  letter-spacing:3px;
  margin-left: 20px;
}
.detail_tea{
  height: 336px;
  background: url('../../assets/img/details.png') no-repeat;
  background-size: 220px 336px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 50px;
}
.detail_tea li:first-child{
  font-size:16px;
  font-family:MicrosoftYaHei;
  font-weight:bold;
  color:rgba(34,34,34,1);
  line-height:21px;
  letter-spacing:3px;
}
.detail_tea li:last-child{
  font-size:16px;
  font-family:MicrosoftYaHei;
  color:rgba(34,34,34,1);
  line-height:26px;
  letter-spacing:3px;
  margin-top: 20px;
}
.detail_into{
  display: flex;
  flex-direction: column;
  margin-top: 28px;
}
.detail_into li{
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.detail_into li label{
  width: 137px;
  font-size:16px;
  font-family:MicrosoftYaHei;
  font-weight:bold;
  color:rgba(34,34,34,1);
  line-height:21px;
  letter-spacing:3px;
}
.detail_into li span{
  width: 590px;
  font-size:16px;
  font-family:MicrosoftYaHei;
  color:rgba(34,34,34,1);
  line-height:21px;
  letter-spacing:3px;
  margin-left: 20px;
}
</style>
